/*主角移动和图片切换功能实现*/
document.addEventListener('DOMContentLoaded', function() {
  var character = document.getElementById('character');
  var cunzi = document.querySelector('.cunzi');
  var targetX = 1000;
  var targetY = 1000;
  
  function moveCharacter() {
    var startX = parseInt(character.style.left) || 0;
    var startY = parseInt(character.style.top) || 0;
    var deltaX = targetX - startX;
    var deltaY = targetY - startY;
    var distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
    var speed = 3; // 设置角色移动速度
    var angle = Math.atan2(deltaY, deltaX);
  
  if (angle > -Math.PI / 4 && angle <= Math.PI / 4) {
    document.getElementById('right').style.display = 'block';
    document.getElementById('left').style.display = 'none';
    document.getElementById('down').style.display = 'none';
    document.getElementById('up').style.display = 'none';
  } else if (angle > Math.PI / 4 && angle <= 3 * Math.PI / 4) {
    document.getElementById('down').style.display = 'block';
    document.getElementById('up').style.display = 'none';
    document.getElementById('left').style.display = 'none';
    document.getElementById('right').style.display = 'none';
  } else if (angle > -3 * Math.PI / 4 && angle <= -Math.PI / 4) {
    document.getElementById('up').style.display = 'block';
    document.getElementById('down').style.display = 'none';
    document.getElementById('left').style.display = 'none';
    document.getElementById('right').style.display = 'none';
  } else {
    document.getElementById('left').style.display = 'block';
    document.getElementById('right').style.display = 'none';
    document.getElementById('down').style.display = 'none';
    document.getElementById('up').style.display = 'none';
  }
  
    if (distance >= speed) {
      var angle = Math.atan2(deltaY, deltaX);
      var newX = startX + speed * Math.cos(angle);
      var newY = startY + speed * Math.sin(angle);
      character.style.left = newX + 'px';
      character.style.top = newY + 'px';
      requestAnimationFrame(moveCharacter);
    } else {
      character.style.left = targetX + 'px';
      character.style.top = targetY + 'px';
    }
  }
  
  cunzi.addEventListener('click', function(event) {
    targetX = event.clientX - cunzi.getBoundingClientRect().left - character.offsetWidth / 2;
    targetY = event.clientY - cunzi.getBoundingClientRect().top - character.offsetHeight / 2;
    moveCharacter();
  });
  

  cunzi.addEventListener('click', function(event) {
    targetX = event.clientX - cunzi.getBoundingClientRect().left - character.offsetWidth / 2;
    targetY = event.clientY - cunzi.getBoundingClientRect().top - character.offsetHeight / 2;
    moveCharacter();
  });
});
// 获取所有 NPC 元素
var npcs = document.querySelectorAll('.cute');
npcs.forEach(function(npc) {
  npc.addEventListener('click', function() {
    var popupId = npc.id.replace('cute', 'popup');
    var popup = document.getElementById(popupId);
    if (popup) {
      // 显示对应的弹窗
      popup.style.display = 'block';
    }
  });
});

// 选择宠物的函数
function selectNPC(selectedId) {
  var popupId = selectedId.replace('cute', 'popup');
  var popup = document.getElementById(popupId);

  if (selectedId === 'cute1') {
    // 用户选择了第一个 NPC
    var notSelected2 = document.getElementById('cute2');
    var notSelected3 = document.getElementById('cute3');
    notSelected2.style.display = 'none';
    notSelected3.style.display = 'none';

    // 关闭弹窗
    closePopup(popupId);

    // 记录用户选择的宠物ID
    console.log('你选择了：' + selectedId);
    // 弹出选择结果提示框
    showResult(selectedId);
  } else if (selectedId === 'cute2') {
    // 用户选择了第二个 NPC
    var notSelected1 = document.getElementById('cute1');
    var notSelected3 = document.getElementById('cute3');
    notSelected1.style.display = 'none';
    notSelected3.style.display = 'none';

    // 关闭弹窗
    closePopup(popupId);

    console.log('你选择了：' + selectedId);
    // 弹出选择结果提示框
    showResult(selectedId);
  } else if (selectedId === 'cute3') {
    // 用户选择了第三个 NPC
    var notSelected1 = document.getElementById('cute1');
    var notSelected2 = document.getElementById('cute2');
    notSelected1.style.display = 'none';
    notSelected2.style.display = 'none';

    // 关闭弹窗
    closePopup(popupId);

    console.log('你选择了：' + selectedId);
    // 弹出选择结果提示框
    showResult(selectedId);
  }
}

// 关闭弹窗的函数
function closePopup(popupId) {
  var popup = document.getElementById(popupId);
  if (popup) {
    // 关闭对应的弹窗
    popup.style.display = 'none';
  }
}

// 弹出选择结果提示框的函数
function showResult(selectedId) {
  var resultBox = document.createElement('div');
  resultBox.innerHTML = selectedId + '已放入你的背包';
  resultBox.style.position = 'fixed';
  resultBox.style.top = '50%';
  resultBox.style.left = '50%';
  resultBox.style.transform = 'translate(-50%, -50%)';
  resultBox.style.padding = '20px';
  resultBox.style.backgroundColor = '#fff';
  resultBox.style.border = '1px solid #ccc';
  resultBox.style.boxShadow = '0 0 10px #ccc';
  resultBox.style.height='500px';
  resultBox.style.width='500px';
  resultBox.style.zIndex='999'
  document.body.appendChild(resultBox);

  setTimeout(function() {
    resultBox.parentNode.removeChild(resultBox);
  }, 3000);
}
//教程的轮播
// 弹出图片轮播弹窗
function showImageSliderPopup() {
  var imageSliderPopup = document.getElementById('imageSliderPopup');
  if (imageSliderPopup) {
    // 显示图片轮播弹窗
    imageSliderPopup.style.display = 'block';
    // 在这里可以编写图片轮播的逻辑
    // 比如利用 JavaScript 或者第三方库来实现图片的轮播效果
  }
}






const npc1 = document.getElementById("cute1");
const npc2 = document.getElementById("cute2");
const npc3 = document.getElementById("cute3");

npc1.style.animationDelay = "0s";
npc2.style.animationDelay = "0.15s";
npc3.style.animationDelay = "0.3s";
/*背景音乐的播放*/
var audio = document.getElementById("myAudio");
var button = document.getElementById("mc");

function toggleMusic() {
  if (audio.paused) {
    audio.play();
    button.style.backgroundImage = "url('../images/music1.png')";
  } else {
    audio.pause();
    button.style.backgroundImage = "url('../images/music0.png')";
  }
}
// 获取按钮元素
var helpButton = document.getElementById('help');
var whereButton = document.getElementById('where');
var bagButton = document.getElementById('bag');
var petButton = document.getElementById('pet');
var taskButton = document.getElementById('task');
var farmButton = document.getElementById('farm');
var shopButton = document.getElementById('shop');
var huntButton = document.getElementById('hunt');
var winButton = document.getElementById('win');
var bookButton = document.getElementById('book');
var bossButton = document.getElementById('bossbox');

// 获取弹窗元素
var helpPopup = document.getElementById('helpPopup');
var wherePopup = document.getElementById('wherePopup');
var bagPopup = document.getElementById('bagPopup');
var petPopup = document.getElementById('petPopup');
var taskPopup = document.getElementById('taskPopup');
var farmPopup = document.getElementById('farmPopup');
var shopPopup = document.getElementById('shopPopup');
var huntPopup = document.getElementById('huntPopup');
var winPopup = document.getElementById('winPopup');
var bookPopup = document.getElementById('bookPopup');
var bossPopup = document.getElementById('bossPopup');
// 获取关闭按钮元素
var closeButtons = document.getElementsByClassName('close-popup');

// 点击按钮显示对应的弹窗
helpButton.addEventListener('click', function() {
  helpPopup.style.display = 'block';
});

whereButton.addEventListener('click', function() {
  wherePopup.style.display = 'block';
});

bagButton.addEventListener('click', function() {
  bagPopup.style.display = 'block';
});

petButton.addEventListener('click', function() {
  petPopup.style.display = 'block';
});
taskButton.addEventListener('click', function() {
  taskPopup.style.display = 'block';
});
farmButton.addEventListener('click', function() {
  farmPopup.style.display = 'block';
});
  
shopButton.addEventListener('click', function() {
  shopPopup.style.display = 'block';
});
huntButton.addEventListener('click', function() {
  huntPopup.style.display = 'block';
});
winButton.addEventListener('click', function() {
  winPopup.style.display = 'block';
});
bookButton.addEventListener('click', function() {
  bookPopup.style.display = 'block';
});
bossButton.addEventListener('click', function() {
  bossPopup.style.display = 'block';
});

// 点击关闭按钮关闭弹窗
for (var i = 0; i < closeButtons.length; i++) {
  closeButtons[i].addEventListener('click', function() {
    var popup = this.closest('.popupa');
    if (popup) {
      popup.style.display = 'none';
    }
  });
}
//加载动画
window.addEventListener('DOMContentLoaded', function() {
  var slides = document.querySelectorAll('.slide');
  var currentSlideIndex = 0;
  
  slides.forEach(function(slide) {
    slide.addEventListener('click', function(e) {
      e.preventDefault();
      
      var progressBar = document.createElement('div');
      progressBar.className = 'progress-bar';
      
      var progress = document.createElement('div');
      progress.className = 'progress';
      
      progressBar.appendChild(progress);
      document.body.appendChild(progressBar);
      
      var width = 1;
      var intervalId = setInterval(function() {
        if (width >= 100) {
          clearInterval(intervalId);
          // 跳转到index4页面
          window.location.href = slide.querySelector('a').getAttribute('href');
        } else {
          width++;
          progress.style.width = width + '%';
        }
      }, 10);

      // 图片轮流播放
      var images = ["/images/beimen.png", "/images/beimen1.png"];
      var imageTag = document.querySelector('.slide img');
      currentSlideIndex = (currentSlideIndex + 1) % images.length;
      imageTag.src = images[currentSlideIndex];
    });
  });
});
// 在跳转到index4时显示加载动画和弹出图片
function showModal(event) {
  event.preventDefault(); // 阻止默认跳转行为

  document.getElementById('loadingAnimation').style.display = 'block'; // 显示加载动画
  document.getElementById('popupImage').style.display = 'block'; // 显示弹出图片

  // 模拟加载过程，在实际情况中应该替换成实际的加载过程
  setTimeout(function() {
    // 隐藏加载动画和弹出图片
    document.getElementById('loadingAnimation').style.display = 'none';
    document.getElementById('popupImage').style.display = 'none';

    window.location.href = event.target.getAttribute('href'); // 完成加载后跳转
  }, 100000000); // 模拟3秒的加载时间
}

var bossBox = document.getElementById('bossBox');

// 获取bossBox的宽度
var bossBoxWidth = bossBox.offsetWidth;

// 计算bossBox可移动的范围
var minX = 0;
var maxX = window.innerWidth - bossBoxWidth;

// 更新bossBox的left值
function updateBossBoxPosition() {
  var currentLeft = parseFloat(getComputedStyle(bossBox).left);
  var direction = bossBox.getAttribute('data-direction');

  if (direction === 'forward') {
    currentLeft += 5;
    bossBox.style.left = currentLeft + 'px';

    if (currentLeft >= maxX) {
      bossBox.setAttribute('data-direction', 'backward');
    }
  } else {
    currentLeft -= 5;
    bossBox.style.left = currentLeft + 'px';

    if (currentLeft <= minX) {
      bossBox.setAttribute('data-direction', 'forward');
    }
  }
}
//PK界面按钮的定义
function openpk() {
  var element = document.getElementById("bossBox");
  element.classList.add("fade-out");
  setTimeout(function() {
    window.location.href = "../others/PK.html";
  }, 500); 
}
var boss = document.querySelector('.boss1');

boss.addEventListener('animationiteration', function() {
  if (boss.style.left === '0px') {
    boss.style.backgroundImage = 'url(../images/bigboss1.png)';
  } else {
    boss.style.backgroundImage = 'url(../images/bigboss2.png)';
  }
});
